$HomeTailWidth: 130px;
.space-page {
	background-color: #fff;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding-right: $HomeTailWidth;
	.title {
		display: flex;
		height: 100px;
		width: 100%;
		align-items: center;
		.space-name {
			max-width: calc(100% - 280px);
			position: relative;
			font-size: 36px;
			font: bold 36px / 100px '思源黑体';
			display: -webkit-box;
			padding: 0 20px;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		.change-sapce-icon {
			height: 36px;
			width: 36px;
			transform: rotateZ(90deg);
			margin-left: 20px;
		}
	}
	.scroll-content {
		height: calc(100vh - 200px);
		width: 100%;
		overflow: scroll;
		.space-list-switch {
			width: 100%;
			height: 100px;
			padding: 0 20px;
			.text {
				float: left;
				color: #666;
				font-size: 32px;
				line-height: 100px;
				font-weight: bold;
			}
			.icon {
				float: left;
				width: 40px;
				height: 40px;
				margin: 30px 20px;
				transition: transform 0.3s;
				&.spread {
					transform: rotateZ(0deg);
				}
				&.shrink {
					transform: rotateZ(-90deg);
				}
			}
			.add {
				float: right;
				margin: 30px 20px;
				width: 40px;
				height: 40px;
				&::after {
					clear: both;
				}
			}
		}
		.space-list {
			&.hiden {
				display: none;
			}
			width: 100%;
		}
	}
	.footer {
		height: 100px;
		width: 100%;
		padding: 0 20px;
		.flex {
			padding: 0 20px;
			display: flex;
			height: 100%;
			gap: 10px;
			align-items: center;
		}
		.recycle-icon {
			width: 48px;
			height: 48px;
		}
		.recycle {
			font-size: 36px;
			line-height: 100px;
		}
	}
}
